<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>尚硅谷_zepto实战_练习</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/animation.css">

</head>
<body>
<div id="container">
  <div class="page page-1-1 page-current ">
    <img src="img/cover.png" class="img_1 pt-page-moveFromTop" alt="">
    <img src="img/wording_cover.png" class="img_2 pt-page-moveFromLeft" alt="">
    <img src="img/icon_up.png" class="img_3 common_img pt-page-moveIconUp" alt="">
  </div>

  <div class="page page-2-1 hide">
    <img class="img_1 pt-page-moveFromBottom hide" src="img/wording.png" />
    <img class="img_2 pt-page-moveCircle hide" src="img/circle.png" />
    <img class="img_3 pt-page-moveFromLeft hide" src="img/people.png" />
    <img class="img_4 pt-page-scaleUp hide" src="img/dot1.png" />
    <img class="img_5 pt-page-scaleUp hide" src="img/check_develop.png" />
    <img class="img_6 common_img pt-page-moveIconUp hide" src="img/icon_up.png" />
    <img class="img_7 pt-page-scaleUp hide" src="img/floating_develop.png" />
  </div>


  <div class="page page-2-2 hide">
    <img class="img_1 pt-page-flipInLeft hide" src="img/introduction.png" />
    <img class="img_2 pt-page-flipInLeft hide" src="img/btn_develop.png" />
    <img class="img_3 pt-page-flipInLeft hide" src="img/dot2.png" />
    <img class="img_6 common_img pt-page-moveIconUp hide" src="img/icon_up.png" />
  </div>


  <div class="page page-3-1 hide">
    <img class="img_1 hide pt-page-moveFromBottom" src="img/wording_design.png" />
    <img class="img_2 hide pt-page-moveCircle" src="img/circle-design.png" />
    <img class="img_3 pt-page-moveFromBottom hide" src="img/people_design.png" />
    <img class="img_4 hide pt-page-scaleUp" src="img/dot1.png" />
    <img class="img_5 hide pt-page-scaleUp" src="img/check_design.png" />
    <img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
    <img class="img_7 hide pt-page-scaleUp" src="img/floating_design.png" />
  </div>
  <div class="page page-3-2 hide">
    <img class="img_1 hide pt-page-flipInLeft" src="img/introduction_design.png" />
    <img class="img_2 hide pt-page-flipInLeft" src="img/btn_design.png" />
    <img class="img_3 hide pt-page-flipInLeft" src="img/dot2.png" />
    <img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
  </div>

  <div class="page page-4-1 hide">
    <img class="img_1 hide pt-page-moveFromBottom" src="img/wording_production.png" />
    <img class="img_2 hide pt-page-moveCircle" src="img/circle-production.png" />
    <img class="img_3 pt-page-moveFromRight hide" src="img/people_production.png" />
    <img class="img_4 hide pt-page-scaleUp" src="img/dot1.png" />
    <img class="img_5 hide pt-page-scaleUp" src="img/check_production.png" />
    <img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
    <img class="img_7 hide pt-page-scaleUp" src="img/floating_production.png" />
    <img class="img_8 hide pt-page-scaleUp" src="img/pic_shadow_production.png" />
  </div>

  <div class="page page-4-2 hide">
    <img class="img_1 hide pt-page-flipInLeft" src="img/introduction_production.png" />
    <img class="img_2 hide pt-page-flipInLeft" src="img/btn_production.png" />
    <img class="img_3 hide pt-page-flipInLeft" src="img/dot2.png" />
    <img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
  </div>
  <div class="page page-5-1 hide">
    <img class="img_1 hide pt-page-rotateCubeBottomIn" src="img/pic_back.png" />
    <img class="img_2 hide pt-page-rotateCubeTopIn" src="img/btn_join.png" />
  </div>
</div>


<script type='text/javascript' src='js/zepto.js'></script>
<script type='text/javascript' src='js/touch.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
